<template>
	<view class="icon" :class="'icon-' + type" :style="{color:color,'font-size':fontSize}" @click="onClick"></view>
</template>

<script>
	// import uniScss from '@/uni.scss'
	export default {
		props: {
			/**
			 * 图标类型
			 */
			type: String,
			/**
			 * 图标颜色
			 */
			color: String,
			/**
			 * 图标大小
			 */
			size: {
				type: [Number, String],
				default: 48
			}
		},

		computed: {
			fontSize() {
				var size = Number(this.size)
				size = isNaN(size) ? 48 : size
				return `${size}rpx`
			},
			bColor() {
				return this.formatColor(this.color)
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			},

			//获得颜色值
			formatColor(str) {
				if (!str) return
				if (str[0] == '$') {
					let colorName = this.formatColorName(str).substr(1)
					return uniScss[colorName]
				} else {
					return str
				}
			},

			//将连接符转换为驼峰
			formatColorName(str) {
				var arr = str.split('-');
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] == '') {
						arr.splice(i, 1);
						i--;
					} else {
						if (i >= 1) {
							arr[i] = arr[i].substring(0, 1).toUpperCase() + arr[i].substring(1);
						}
					}
				}
				return arr.join('');
			}
		},
	}
</script>

<style>
	@import "./iconfont.css";
</style>
